<template>
	<view class="page-index">
		<view class="bar-area">
			<view
				class="fc-white fs30"
				@click="loginOut"
				:style="showQuitBtn ? '' : 'visibility: hidden;'"
				>退出</view
			>
			<view class="flex-row" @click="areaChange">
				<view class="fc-white fs35">体征录入</view>
			</view>
			<view class="fc-white fs30">{{ loginUser && loginUser.YHXM }}</view>
		</view>
		<!-- -->
		<view class="patient-info" v-if="step != 0">
			<view class="item-title">
				<view class="item-brch">{{ nowPatient.brch }}</view>
				<view class="item-info">
					<view class="item-line"></view>
					<view class="item-body">
						<view class="item-body-top">
							<view class="fs30 fb">{{ nowPatient.brxm }}</view>
							<u--image
								class="ml10"
								width="20"
								height="20"
								:src="
									nowPatient.brxbDm == 1
										? '/static/man.svg'
										: '/static/female.svg'
								"
							></u--image>
							<view class="fs30 fc-sub ml10">{{
								nowPatient.brnl
							}}</view>
							<view class="fs30 fc-sub ml10">{{
								nowPatient.mzhm
							}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="patientInfo-zd"> 诊断：{{ nowPatient.brzs }} </view>
		</view>
		<view class="scan-tips-warning" v-if="step == 0">
			请扫描病人腕带进行确认
		</view>
		<view class="scan-tips-primary" v-if="step == 1">
			已确认病人腕带信息
		</view>
		<view class="scan-tips-warning" v-if="step == 2">
			若继续录入，请再次扫描患者腕带
		</view>

		<!-- <view
			style="display: flex; position: absolute; top: 0rpx; left: 100rpx"
		>
			<view>
				<view @click="scanTest(testBrid, 1)">腕带扫描测试</view>
			</view>
			<view>
				<input
					type="text"
					v-model="testBrid"
					placeholder="请输入病人id"
				/>
			</view>
		</view> -->

		<!-- -->
		<view class="main-context" v-if="step != 0">
			<view class="vital-sign-form">
				<view class="vital-sign-form-main" :style="`height: calc(100% - ${step == 1?'120':'40'}rpx);`">
					<view class="vital-sign-form-item">
						<view class="form-item-label">录入时间</view>
						<view class="form-item-value fs30">
							{{ recordDate }}
						</view>
					</view>
					<view class="vital-sign-form-item">
						<view class="form-item-label">意识</view>
						<view class="form-item-value">
							<view>
								<u-input
									v-model="form.ys"
									placeholder="请选择"
									border="none"
									suffixIcon="arrow-down"
									:disabled="step != 1"
								>
								</u-input>
							</view>
							<view
								class="picker-wrapper"
								@click="openPicker('ys')"
							></view>
						</view>
						<u-picker
							:show="showYsPicker"
							:columns="[
								[
									'清醒',
									'嗜睡',
									'意识模糊',
									'昏睡',
									'浅昏迷',
									'深昏迷',
								],
							]"
							@confirm="pickerConfirm('ys', $event)"
							@cancel="pickerCancel('ys')"
						>
						</u-picker>
					</view>
					<view class="vital-sign-form-item">
						<view class="form-item-label">瞳孔左</view>
						<view class="form-item-value">
							<u-input
								v-model="form.tkz"
								placeholder="请输入"
								border="none"
								:disabled="step != 1"
							>
								<template slot="suffix">
									<u--text
										text="mm"
										slot="prefix"
										margin="0 3px 0 0"
										type="tips"
									></u--text>
								</template>
							</u-input>
						</view>
					</view>
					<view class="vital-sign-form-item">
						<view class="form-item-label">瞳孔右</view>
						<view class="form-item-value">
							<view class="d-flex">
								<u-input
									v-model="form.tky"
									placeholder="请输入"
									border="none"
									:disabled="step != 1"
								>
									<template slot="suffix">
										<u--text
											text="mm"
											slot="prefix"
											margin="0 3px 0 0"
											type="tips"
										></u--text>
									</template>
								</u-input>
							</view>
						</view>
					</view>
					<view class="vital-sign-form-item">
						<view class="form-item-label">对光反应(左)</view>
						<view class="form-item-value">
							<view>
								<u-input
									v-model="form.dgfyz"
									placeholder="请选择"
									border="none"
									suffixIcon="arrow-down"
									:disabled="step != 1"
								>
								</u-input>
							</view>
							<view
								class="picker-wrapper"
								@click="openPicker('dgfyz')"
							></view>
							<u-picker
								:show="showDgfyzPicker"
								:columns="[['灵敏', '迟钝', '消失', '缺如']]"
								@confirm="pickerConfirm('dgfyz', $event)"
								@cancel="pickerCancel('dgfyz')"
							>
							</u-picker>
						</view>
					</view>
					<view class="vital-sign-form-item">
						<view class="form-item-label">对光反应(右)</view>
						<view class="form-item-value">
							<view>
								<u-input
									v-model="form.dgfyy"
									placeholder="请选择"
									border="none"
									suffixIcon="arrow-down"
									:disabled="step != 1"
								>
								</u-input>
							</view>
							<view
								class="picker-wrapper"
								@click="openPicker('dgfyy')"
							></view>
							<u-picker
								:show="showDgfyyPicker"
								:columns="[['灵敏', '迟钝', '消失', '缺如']]"
								@confirm="pickerConfirm('dgfyy', $event)"
								@cancel="pickerCancel('dgfyy')"
							>
							</u-picker>
						</view>
					</view>
					<view class="vital-sign-form-item">
						<view class="form-item-label">体温</view>
						<view class="form-item-value">
							<!-- <view class="mb-20">
								<u-radio-group
									v-model="form.twType"
									placement="row"
									:disabled="step != 1"
								>
									<u-radio
										v-for="(item,index) in twTypeOptions" :key="index"
										shape="circle"
										:label="item"
										:name="item"
									></u-radio>
								</u-radio-group>
							</view> -->
							<div>
								<u-input
									v-model="form.tw"
									placeholder="请输入"
									border="none"
									:disabled="step != 1"
								>
									<template slot="suffix">
										<u--text
											text="℃"
											slot="prefix"
											margin="0 3px 0 0"
											type="tips"
										></u--text>
									</template>
								</u-input>
							</div>
						</view>
					</view>
					<view class="vital-sign-form-item">
						<view class="form-item-label">心率</view>
						<view class="form-item-value">
							<!-- <view class="mb-20">
								<u-radio-group
									v-model="form.xlType"
									placement="row"
									:disabled="step != 1"
								>
									<u-radio
										v-for="(item,index) in xlTypeOptions" :key="index"
										shape="circle"
										:label="item"
										:name="item"
									></u-radio>
								</u-radio-group>
							</view> -->
							<div>
								<u-input
									v-model="form.xl"
									placeholder="请输入"
									border="none"
									:disabled="step != 1"
								>
									<template slot="suffix">
										<u--text
											text="次/分"
											slot="prefix"
											margin="0 3px 0 0"
											type="tips"
										></u--text>
									</template>
								</u-input>
							</div>
						</view>
					</view>
					<view class="vital-sign-form-item">
						<view class="form-item-label">呼吸</view>
						<view class="form-item-value">
							<u-input
								v-model="form.hx"
								placeholder="请输入"
								border="none"
								:disabled="step != 1"
							>
								<template slot="suffix">
									<u--text
										text="次/分"
										slot="prefix"
										margin="0 3px 0 0"
										type="tips"
									></u--text>
								</template>
							</u-input>
						</view>
					</view>
				</view>
			</view>
			<view class="submit-button" v-if="step == 1">
				<button
					class="primary-button"
					style="width: calc(100% - 50rpx)"
					@click="handleSubmit()"
				>保存</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from "vuex"
import { logout } from "@/api/utils.js"
import {
	getDateTimeString,
	getInspectType,
	getTimestamp,
	showToast,
} from "@/static/js/common.js"
import "@/common/font.scss"

import Select from "@/component/Select"

export default {
	components: {
		Select, //select组件
	},
	props: {
		showQuitBtn: {
			type: Boolean,
			default: function () {
				return true
			},
		},
	},
	data() {
		return {
			step: 0, // 0:初始化空白状态  1:已扫描腕带  2:已提交数据
			recordDate: new Date().toLocaleString().replace(/\//g, "-"),

			nowPatient: {
				brch: "Q123", //
				brxm: "张三丰", //
				brxbDm: "1", //
				brnl: "12岁", //
				mzhm: "BLH112312313", //
				brzs: "感到不舒服", //
			}, // 当前病人

			testBrid: "",

			form: {
				ys: "", //意识
				tkz: "", //瞳孔 左
				tky: "", //瞳孔 右
				dgfyz: "", // 对光反应 左
				dgfyy: "", // 对光反应 右
				twType: "腋温", // 体温类型
				tw: "", // 体温
				xlType: "自主心率", //心率类型
				xl: "", //心率
				hx: "", //呼吸
			},
			showYsPicker: false, //意识下拉
			showDgfyzPicker: false, //对光反应左 选择器
			showDgfyyPicker: false, //对光反应右 选择器

			twTypeOptions:['腋温','耳温','口温','肛温',],
			xlTypeOptions:['自主心率','起搏心率'],
		}
	},
	watch: {},
	computed: {
		...mapState(["loginUser", "area", "skinTestPatientList"]),
		actions() {
			if (this.area && this.area.length > 0) {
				let list = this.area.map((item) => {
					return {
						name: item.ksmc,
						code: item.ksdm,
					}
				})
				return list
			} else {
				return []
			}
		},
	},
	beforeDestroy() {
		uni.$off("scanCodeEmit") //取消监听
		clearInterval(this.skinTestInterval) //销毁皮试定时器
	},
	mounted() {
		// 接收原生扫描传值     监听扫描事件
		uni.$on("scanCodeEmit", async (res) => {
			console.log("检验执行扫描内容：", res)
			// uni.$emit("scanCodeEmit", res)

			//是腕带
			let patientRes = await this.getPatientByBrid(res)
			if (patientRes.res.Data.length == 0) {
				showToast(-1,'没有找到病人信息')
				return
			}
			this.nowPatient = patientRes.res.Data[0] //获取病人信息
			this.recordDate = getDateTimeString(new Date()); //更新记录时间
			// await this.getInspectList()
			this.step = 1 //当前已扫描腕带

			//初始化表单
			this.resetForm();
		})

		console.log("当前登陆人信息：", this.loginUser)
	},
	methods: {
		/**
		 * 扫描测试
		 * type 1 腕带   2 输液贴
		 */
		async scanTest(code, type) {
			if (type == 1) {
				//是腕带
				let patientRes = await this.getPatientByBrid(code)
				if (patientRes.res.Data.length == 0) {
					showToast(-1,'没有找到病人信息')
					return
				}
				this.nowPatient = patientRes.res.Data[0] //获取病人信息
				this.recordDate = getDateTimeString(new Date()); //更新记录时间
				// await this.getInspectList()
				this.step = 1 //当前已扫描腕带

				//初始化表单
				this.resetForm();
			}
		},

		/**
		 * 体征提交
		 */
		handleSubmit() {
			let date = new Date()
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()

			let formItems = [
				{ xmh: 1, xmmc: "体温",  xmqz: this.form.tw, xmxb: this.form.twType, ycbz: 0 },
				{ xmh: 3, xmmc: "呼吸", xmqz: this.form.hx, xmxb: "", ycbz: 0, xmlx: 1, },
				{ xmh: 4, xmmc: "心率", xmqz: this.form.xl, xmxb: this.form.xlType, ycbz: 0, xmlx: 1, },
				{ xmh: 1075, xmmc: "意识", xmqz: this.form.ys, xmxb: "", ycbz: 0, xmlx: 1, },
				{ xmh: 1076, xmmc: "瞳孔左(mm)", xmqz: this.form.tkz, xmxb: "", ycbz: 0, xmlx: 1, },
				{ xmh: 1077, xmmc: "瞳孔右(mm)", xmqz: this.form.tky, xmxb: "", ycbz: 0, xmlx: 1, },
				{ xmh: 1078, xmmc: "对光反应(左)", xmqz: this.form.dgfyz, xmxb: "", ycbz: 0, xmlx: 1, },
				{ xmh: 1079, xmmc: "对光反应(右)", xmqz: this.form.dgfyy, xmxb: "", ycbz: 0, xmlx: 1, },
			];
			let details = [];

			formItems.forEach(el=>{
				if(el.xmh == 1 || el.xmh == 4){//心率或呼吸
					if(el.xmxb && el.xmqz){
						details.push(el);
					}
				}else{//其余体征
					if(el.xmqz){
						details.push(el);
					}
				}
			})
			if(details.length == 0){
				showToast(-1,'请至少填写一项体征');
				return;
			}
			details.push(
				{xmh:13,xmmc:"护理措施",xmqz:"pda端体征录入。",xmxb:"",ycbz:0,xmlx:4}
			)
			console.log(details);
			let params = {
				details: details,
				fzxh: this.nowPatient.fzxh,
				jgid: this.nowPatient.jgid,
				jllx: 0,
				jlsj: this.recordDate,
				jlzt: 1,
				jzqy: this.nowPatient.jzlx,
				jzxh: this.nowPatient.jzlsh,
				sxgh: this.loginUser.YHID,
				sxsj: this.recordDate,
				sxxm: this.loginUser.YHXM,
				sybz: 0,
				twdsd: "",//体温时点 不需要传
				zcl: "",//总入量
				zrl: "",//总出量
			}

			return this.$commonAjax(
				"auth/mobile/nurse/addNurseRecord",
				params
			).then((res) => {
				if(res.res.ReType == 0){
					showToast(0,'体征录入已保存');
					this.step = 2;//已提交
				}else{
					showToast(-1,'保存失败');
				}
			}).catch(err=>{
				showToast(-1,err);
			})
		},

		/**
		 * 初始化表单
		 */
		resetForm(){
			this.form = Object.assign(this.form,{
				ys: "", //意识
				tkz: "", //瞳孔 左
				tky: "", //瞳孔 右
				dgfyz: "", // 对光反应 左
				dgfyy: "", // 对光反应 右
				twType: "腋温", // 体温类型 默认腋温
				tw: "", // 体温
				xlType: "自主心率", //心率类型 默认自主心率
				xl: "", //心率
				hx: "", //呼吸
			})
		},

		/**
		 * type： 选择器类型
		 */
		openPicker(type) {
			// debugger
			if(this.step != 1){
				return
			}
			switch (type) {
				case "ys": // 意识
					this.showYsPicker = true
					return
				case "dgfyz": // 对光反应 左
					this.showDgfyzPicker = true
					return
				case "dgfyy": // 对光反应 右
					this.showDgfyyPicker = true
					return
				default:
					return
			}
		},
		/**
		 * type：选择器类型
		 */
		pickerCancel(type) {
			switch (type) {
				case "ys": // 意识
					this.showYsPicker = false
					return
				case "dgfyz": // 对光反应 左
					this.showDgfyzPicker = false
					return
				case "dgfyy": // 对光反应 右
					this.showDgfyyPicker = false
					return
				default:
					return
			}
		},
		/**
		 * 选择器点击确认
		 */
		pickerConfirm(type, e) {
			console.log(type, e)
			switch (type) {
				case "ys": // 意识
					this.form.ys = e.value[0]
					this.showYsPicker = false
					return
				case "dgfyz": // 对光反应 左
					this.form.dgfyz = e.value[0]
					this.showDgfyzPicker = false
					return
				case "dgfyy": // 对光反应 右
					this.form.dgfyy = e.value[0]
					this.showDgfyyPicker = false
					return
				default:
					return
			}
		},

		/**
		 * 根据病人id 获取病人详情
		 * brid 病人id
		 */
		getPatientByBrid(brid) {
			let params = {
				orgId: this.loginUser?.JGID, //长机构id
				// jzlx: null, // 就诊类型 1 抢救 2 留观 3诊室 不传就是全部
				lspb: 0, //离室判别
				yhdm: this.loginUser?.YHDM, // 当前登录用户的员工代码
				type: 1, //：病人列表   2：我的关注
				// hisJzxh: idVismed,
				// idMedord:idMedord,// 医嘱组号
				brid: brid, //病人id
			}
			return this.$commonAjax(
				"auth/mobile/patient/get/getPatientList",
				params
			)
		},

		/**
		 * 根据 就诊流程号 获取病人皮试信息
		 * mzhm 病人病案号
		 */
		getInspectList(mzhm) {
			this.listData = [] //置空列表
			let date = new Date()
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()
			let params = {}

			return this.$commonAjax(url, params).then((res) => {
				console.log("检验列表", res)

				this.listData = res.res.Data
				this.isRefresherTriggered = false
			})
		},

		loginOut() {
			logout()
		},
		onPullRefresh() {
			if (this.isRefresherTriggered) {
				return
			}
			this.isRefresherTriggered = true
			this.getInspectList()
		},
		onReachBottomDistance() {
			console.log(1111)
		},
	},
}
</script>

<style lang="scss">
.patient-info {
	padding: 20rpx;
	position: relative;

	.filter-button {
		font-size: 28rpx;
		color: #4088fe;
		background-color: #ebf3fe;
		border: 2rpx solid #4088fe;
		border-radius: 6rpx;
		width: 100rpx;
		text-align: center;
		padding: 10rpx 10rpx;
		position: absolute;
		right: 20rpx;
		top: 14rpx;
		z-index: 100;
	}
}
.patientInfo-zd {
	width: calc(100% - 100rpx);
	font-size: 25rpx;
	color: #909399;
	padding: 0rpx 12rpx 8rpx 12rpx;
	position: relative;
	left: 116rpx;
}
.main-context {
	position: relative;
	height: calc(100% - 340rpx);
}
.vital-sign-form {
	height: 100%;
	padding: 20rpx;
	.vital-sign-form-title {
		font-weight: bold;
		font-size: 34rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.vital-sign-form-main {
		
		overflow-y: auto;
		.vital-sign-form-item {
			display: flex;
			margin-bottom: 40rpx;
			align-items: baseline;
			.form-item-label {
				font-size: 28rpx;
				color: #262626;
				width: 30%;
			}
			.form-item-value {
				position: relative;
				width: 70%;
				.u-input {
					background-color: #f9f9f9 !important;
					border-radius: 6rpx;
					padding: 8rpx !important;
				}
				.u-textarea {
					background-color: #f9f9f9 !important;
					border-radius: 6rpx;
					padding: 8rpx !important;
				}
				.u-radio {
					margin-right: 20rpx;
				}
				.picker-wrapper {
					position: absolute;
					top: 0rpx;
					width: 100%;
					height: 100%;
					z-index: 100;
				}
			}
		}
	}
}
.submit-button {
	display: flex;
	position: absolute;
	bottom: 0rpx;
	width: 100%;
	margin: 0rpx 16rpx;
	button {
		color: #262626;
		background-color: #ffffff;
		margin: 5rpx;
	}
	.primary-button {
		color: #ffffff;
		background-color: #4088fe;
	}
}
.bar-area {
	height: 100rpx;
	background-color: $bs-color-primary;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 30rpx;
	justify-content: space-between;
	padding: 0 30rpx;
}
.item-title {
	padding: 6rpx 10rpx 12rpx 10rpx;
	display: flex;
}
.item-line {
	width: 1rpx;
	background-color: #d6d7d9;
	height: 46rpx;
	width: 2rpx;
}

.item-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 20rpx;
}
.item-body-top {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 10rpx;
}
.item-brch {
	width: 98rpx;
	font-size: 30rpx;
	color: #e06263;
	font-weight: bold;
}
.item-info {
	display: flex;
}
.scan-tips-warning {
	text-align: center;
	background-color: #faefe4;
	font-size: 30rpx;
	color: #ff9a27;
	padding: 10rpx 0rpx;
}
.scan-tips-primary {
	text-align: center;
	background-color: #4089fe1f;
	font-size: 30rpx;
	color: #4088fe;
	padding: 10rpx 0rpx;
}
</style>
